<template>
  <a-layout-sider
    :theme="sideTheme"
    :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
    width="230px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <div :class="['logo', theme]" style="text-align: center;">
      <router-link to="/dashboard/dashboard">
        <img style="width: 50px;" src="@/assets/img/logo.svg" />
      </router-link>
    </div>
    <div class="menu" v-for="(menu, i) in menuDataFinal" :key="i">
      <div class="menu-type">{{ menu.name }}</div>
      <div
        class="menu-child"
        :class="currentPath === child.path ? 'menu-child-choose' : ''"
        v-for="(child, index) in menu.children"
        :key="index"
        @click="routeTo(menu.path, child)"
      >
        <img :src="child.menuImg" alt="" />
        <div v-if="!collapse">{{ child.name }}</div>
      </div>
    </div>
  </a-layout-sider>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "SideMenu",
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    menuData: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: "dark",
    },
  },
  data() {
    return {
      currentPath: "",
      collapse: false,
      role: "admin",
      menuDataFinal: [],
      menuDataAdmin: [
        {
          path: "page",
          name: "首页",
          children: [
            {
              path: "dashboard",
              name: "首页",
              menuImg: require("../../assets/img/menu/menu6.svg"),
            },
          ],
        },
        {
          path: "page",
          name: "医废溯源",
          children: [
            {
              path: "waste",
              name: "医废信息表",
              menuImg: require("../../assets/img/menu/menu6.svg"),
            },
            {
              path: "process",
              name: "医废处理流程",
              menuImg: require("../../assets/img/menu/menu1.svg"),
            },
            {
              path: "transportation",
              name: "转运车辆路径",
              menuImg: require("../../assets/img/menu/menu5.svg"),
            },
          ],
        },
        {
          path: "page",
          name: "医废异常",
          children: [
            {
              path: "abnormalwaste",
              name: "异常情况",
              menuImg: require("../../assets/img/menu/menu2.svg"),
            },
            {
              path: "backup",
              name: "备份",
              menuImg: require("../../assets/img/menu/menu4.svg"),
            },
          ],
        },
        {
          path: "page",
          name: "后台管理",
          children: [
            {
              path: "management",
              name: "工作人员",
              menuImg: require("../../assets/img/menu/menu2.svg"),
            },
          ],
        },
      ],
    };
  },
  computed: {
    sideTheme() {
      return this.theme == "light" ? this.theme : "dark";
    },
    ...mapState("setting", ["isMobile", "systemName"]),
  },
  methods: {
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
    routeTo(path1, child) {
      if (this.currentPath === child.path) {
        return
      }
      sessionStorage.removeItem('package_id')
      this.currentPath = child.path;
      this.$router.push(`/${path1}/${child.path}`);
    },
    toggleCollapse(col) {
      this.collapse = col;
    },
  },
  created() {
    this.menuDataFinal = [...this.menuDataAdmin];
  },
  mounted() {
    this.currentPath = this.$route.fullPath.split("/")[2];
  },
  watch: {
    $route(to) {
      this.currentPath = to.path.split("/")[2];
    },
  },
};
</script>

<style lang="less" scoped>
@import "index";
</style>
